import React, { useEffect, useState } from 'react';
import Header from '../../../component/WFL/header'
import { useNavigate, useLocation, NavLink } from 'react-router-dom'
import './signDetail.scss'
import { Button, Form, Input, Col, message, Modal } from 'antd';
import { getSignEdit } from '../../../api/Signing'
interface Props {

}
function SignDetail(props: Props) {
    const [messageApi, contextHolder] = message.useMessage();
    const { TextArea } = Input;
    var navigate = useNavigate()
    var location = useLocation()
    const [form] = Form.useForm()
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [istext, setIstext] = useState("")

    //挂载期获取回显数据
    useEffect(() => {
        form.setFieldsValue(location.state)
    }, [])

    //点击审核弹出对话框
    const showModal = () => {
        setIstext("审核确认")
        setIsModalOpen(true);
    };
    //点击确认
    const handleOk = async () => {
        if (istext == "审核确认") {
            var res = await getSignEdit({ ...location.state, "isSign": "待支付" })
            if (res.status == 200) {
                location.state.isSign = "待支付"
                setIsModalOpen(false);
            }
        }else if(istext=="驳回确认"){
            var res = await getSignEdit({ ...location.state, "isSign": "已驳回" })
            if (res.status == 200) {
                location.state.isSign = "已驳回"
                setIsModalOpen(false);
            }
        }

    };
    //点击取消
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //点击驳回
    var clickRejsct = () => {
        setIstext("驳回确认")
        setIsModalOpen(true);
    }
    //点击提醒支付
    var pay = () => {
        messageApi.open({
            type: 'success',
            content: '提醒成功',
        });
    }
    return (
        <div className='signdetail'>
            {contextHolder}
            <div className="main">
                <Header txt='签约详情'></Header>
                <div className="resident">
                    <h4>居民信息</h4>
                    <div className="inputbox">
                        <Form
                            name="basic"
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                            layout="inline"
                            form={form}
                        >

                            <Col span={8}>
                                <Form.Item
                                    label="姓名"
                                    name="name"

                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} style={{color:"#2984f8"}}/>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="身份证号"
                                    name="id-num"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>


                            <Col span={8}>
                                <Form.Item
                                    label="性别"
                                    name="sex"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="出生年月"
                                    name="born"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="联系电话"
                                    name="phone"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="现居地"
                                    name="city"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="居民标签"
                                    name="tags"
                                >
                                    {
                                    location.state.tags.map((item:any)=>{
                                        return <span >{item}</span>
                                    })
                                    }
                                </Form.Item>
                            </Col>

                            <Col span={16}></Col>


                            <Col span={24}><h4>签约信息</h4></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="签约编号"
                                    name="id"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="签约状态"
                                    name="isSign"
                                >
                                    <Input bordered={false} style={{color:"#3DD4A7"}}/>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="签约机构"
                                    name="organization"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="签约团队"
                                    name="doctorTeam"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="签约医生"
                                    name="doctor"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务包"
                                    name="server"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="签约类型"
                                    name="signType"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="签约周期"
                                    name="signTime"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="费用"
                                    name="signPrice"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="申请时间"
                                    name="date"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="生效日期"
                                    name="startdata"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>
                            <Col span={24}></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="签约备注"
                                    name="comment"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={24}>
                                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                    {
                                        location.state.isSign == "待审核" ?
                                            <>
                                                <NavLink to="/index/sign-edit" state={location.state}><Button type="primary">编辑签约信息</Button></NavLink>
                                                <Button type="primary" style={{ background: "#3DD4A7" }} onClick={() => { showModal() }}>审核通过</Button>
                                                <Button type="primary" danger onClick={clickRejsct}>驳回</Button>
                                                <Button onClick={() => { navigate(-1) }}>返回</Button>
                                            </> : ""
                                    }
                                    {
                                        location.state.isSign == "待支付" ?
                                            <>
                                                <NavLink to="/index/sign-edit" state={location.state}><Button type="primary">编辑签约信息</Button></NavLink>
                                                <Button type="primary" style={{ background: "#3DD4A7" }} onClick={pay}>提醒支付</Button>
                                                <Button onClick={() => { navigate(-1) }}>返回</Button>
                                            </> : ""
                                    }
                                    {
                                        location.state.isSign == "已驳回" ?
                                            <Button onClick={() => { navigate(-1) }}>返回</Button> : ""
                                    }

                                </Form.Item>
                            </Col>
                        </Form>
                    </div>
                </div>

                <Modal title={istext} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText="确定" cancelText="取消">
                    {
                        istext == "审核确认" ?
                            <p>确定要审核通过吗?</p> :
                            <TextArea rows={4} placeholder="请输入驳回原因..." maxLength={6} />
                    }
                </Modal>
            </div>
        </div>
    );
}

export default SignDetail;